<template>
    <div class="pages-nav">
        <div class="nav_left">
            <span class="title">P2P后台管理</span>
        </div>
        <div class="nav_right">
            <span @click="onClick($event,index)"
                  v-for="(item,index) in navList"
                  :key="index"
            >
                 <router-link :class="{'nav-item':true,'nav-select':active[index]}" :to="item.route">{{item.text}}
             </router-link>
            </span>
        </div>
        <div class="login">
            <slot name="login" ></slot>
        </div>

    </div>
</template>

<script>
    export default {
        name: "Nav",
        data() {
            return {
                active: null,
            }
        },
        props: {
            navList: Array
        },
        methods: {
            onClick(event, index) {
                this.active = this.active.map((item1, index1) => index1 == index);
            },
            initActiveList() {
                this.active = new Array(this.navList.length).fill(false);
                this.active.length && (this.active[0] = true)

            },
            update(){
              this.active = this.navList.map(item => ('/' + this.$route.fullPath.split('/')[1]) == item.route);
            }
        },
        watch: {
            navList() {
                this.initActiveList();
            },
            $route(){
                this.update();
            }
        },
        created() {
            this.initActiveList();
            this.update();
        }
    }
</script>

<style scoped lang="less">

    .nav_left {
        float: left;
        width: 220px;
        text-align: center;
        user-select: none;
    }

    .nav_right {
        float: left;
        text-align: center;
        span{
            display: inline-block;
        }
        a {
            text-decoration: none;
            color: white;
            padding: 5px 20px;
        }
        a:hover {
            background-color: #3D6D9E;
        }
    }

    .pages-nav {
        height: 50px;
        background-color: #5F87AF;
        color: white;
        min-width: 1140px;
        position:relative;

        .nav_first {
            margin-left: 20px;
        }

        .nav-item {
            line-height: 50px;
            text-decoration: none;
            color: white;
            border-radius: 10px;
        }

        .nav-select {
            background-color: #3D6D9E;
        }


    }

    .title {
        display: inline-block;
        font-size: 30px;
        width: 230px;
        line-height: 50px;
    }
    .login{
        display: inline-block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 30px;
    }
</style>